<template>
  <div class="download-page">
    <n-tabs :default-value="0" type="line" @update:value="tabChange">
      <n-tab-pane :name="0" tab="全部"></n-tab-pane>
      <n-tab-pane
        v-for="item in clasifyList"
        :key="item.name"
        :name="item.id"
        :tab="item.name"
      ></n-tab-pane>
    </n-tabs>
    <div class="filter flex align-center">
      <n-date-picker
        class="date-pick"
        v-model:value="queryForm.range"
        type="daterange"
        clearable
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @updateValue="rangeChange"
      />
      <n-button type="primary" class="search-btn" @click="queryData">
        搜索
      </n-button>
    </div>
    <div class="table">
      <n-data-table
        :columns="columns"
        :data="tableInfo.tableData"
        :pagination="false"
        :bordered="false"
      />
    </div>
    <div class="pagination">
      <n-pagination
        v-model:page="tableInfo.queryForm.pageNo"
        :page-count="tableInfo.total"
        :page-sizes="tableInfo.pageSizes"
        show-quick-jumper
        show-size-picker
        @updatePage="pageChange"
        @updatePageSize="sizeChange"
      ></n-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  NTabPane,
  NTabs,
  NButton,
  NDatePicker,
  NDataTable,
  NImage,
  NPagination
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { ref, h } from 'vue'
import { useApi } from '@/hooks/useApi'
import { useRouter } from 'vue-router'
import downloadApi from '@/service/api/download'
import homeApi from '@/service/api/home'

const queryForm = ref({
  range: null
})
const router: any = useRouter()
interface filterItem {
  id: number | null
  name: string
}

const clasifyList = ref<filterItem[]>([])
const getClassify = async () => {
  const { data } = await homeApi.tabs()
  clasifyList.value = data
}
const handDetail = (e: any) => {
  const href = router.resolve({
    path: e.book_type === 1 ? '/mhdetail' : '/detail',
    query: {
      id: e.id
    }
  })
  window.open(href.href, '_blank')
}

const instance = getCurrentInstance()
const $getImg = instance?.appContext.config.globalProperties.$getImg
const columns: DataTableColumns<any> = [
  {
    title: '封面',
    key: 'cover',
    align: 'center',
    render(row: any) {
      return h(NImage, {
        src: $getImg(row.cover),
        width: '114',
        height: '70',
        previewDisabled: true,
        objectFit: 'cover',
        style: {
          borderRadius: '4px'
        },
        onClick: () => handDetail(row)
      })
    }
  },
  {
    title: '标题',
    key: 'title',
    render(row: any) {
      return h(
        'div',
        {
          onClick: () => handDetail(row),
          style: {
            cursor: 'pointer'
          }
        },
        [
          h(
            'div',
            {
              class: 'row-title'
            },
            row.name
          ),
          h(
            'div',
            {
              class: 'row-id'
            },
            'ID: ' + row.id
          )
        ]
      )
    }
  },
  {
    title: '价格',
    key: 'payMoney',
    render(row: any) {
      let text = ''
      if (row.price > 0) {
        text = `-${row.price}`
      } else {
        text = '免费'
      }
      return h('div', {}, text)
    }
  },
  {
    title: '订单号',
    key: 'orderno'
  },
  {
    title: '下载时间',
    key: 'create_at'
  }
]
const tabChange = (e: number) => {
  if (e === 0) {
    tableInfo.queryForm.type_id = ''
  } else {
    tableInfo.queryForm.type_id = e
  }
  queryData()
}
const rangeChange = (e: any, formatValue: any) => {
  if (formatValue) {
    tableInfo.queryForm.startTime = formatValue[0]
    tableInfo.queryForm.endTime = formatValue[1]
  } else {
    tableInfo.queryForm.startTime = ''
    tableInfo.queryForm.endTime = ''
  }
  queryData()
}
const { tableInfo, queryData, pageChange, sizeChange } = useApi({
  isPaging: true,
  isRequest: true,
  getData: downloadApi.list,
  initForm: {
    startTime: '',
    endTime: '',
    type_id: ''
  }
})

onMounted(() => {
  getClassify()
})
</script>

<style scoped lang="scss">
.download-page {
  min-height: 1420px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  padding: 15px 24px;
  .filter {
    .date-pick {
      width: 300px;
    }
    .search-btn {
      margin-left: 10px;
      font-size: 14px;
      width: 82px;
      height: 36px;
    }
  }
  .table {
    margin-top: 21px;
  }
  .pagination {
    padding: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
